@p: 0.0925925925vw;

.mobile {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: relative;

    .bg {
        width: 100vw;
        position: absolute;
        opacity: 0.6;
        top: 1300 * @p;
    }

    .m-meun {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 999;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 100 * @p;
        left: 0;
        top: 0;
        transition: all 0.1s;

        .m-close-meun {
            position: absolute;
            top: 86 * @p;
            right: 66 * @p;
            width: 6vw;
        }

        .m-meun-item {
            font-size: 80 * @p;
            font-weight: bold;
            line-height: 160 * @p;
        }
    }

    .m-toolbar-wrapper {
        position: fixed;
        right: 50 * @p;
        bottom: 100 * @p;
        opacity: 0.8;
        width: 100 * @p;
        height: 100 * @p;
        z-index: 99;
        overflow: hidden;
        transition: all 0.1s;

        .m-toolbar {
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 0;
            top: 0;

            .m-go-item {
                width: 100 * @p;
                height: 100 * @p;
                border-radius: 50%;
                background-size: 50 * @p 50 * @p;
                background-position: center;
                background-color: #f5f6f7;
                background-repeat: no-repeat;
                filter: grayscale(1);
                cursor: pointer;

                &:not(:first-child) {
                    margin-top: 54 * @p;
                }
            }

            .m-acfun {
                background-size: 66 * @p 66 * @p;
            }
        }
    }

    .m-head {
        display: flex;
        justify-content: space-between;
        padding: 86 * @p 66 * @p 0 66 * @p;
        align-items: center;

        .m-logo {
            display: flex;
            // padding-left: 66 * @p;
            align-items: center;

            img {
                width: 6vw;
            }

            .m-name {
                font-size: 60 * @p;
                font-weight: bold;
                margin-left: 30 * @p;
            }
        }
    }

    .m-top {
        padding-top: 140 * @p;

        .m-top-cover-wrapper {
            display: flex;
            justify-content: center;

            .m-top-cover {
                width: 712 * @p;
            }
        }

        .m-top-intrd {
            padding: 104 * @p 120 * @p;

            p {
                font-size: 80 * @p;
                line-height: 130 * @p;
                font-weight: bold;
            }
        }
    }

    .m-line {
        height: 4 * @p;
        background-color: #cccccc;
    }

    .m-project {
        padding-bottom: 100 * @p;

        .m-project-head {
            padding-top: 150 * @p;
            padding-left: 170 * @p;
            padding-right: 100 * @p;

            .m-project-name {
                // background-color: purple;

                .m-main-name {
                    font-size: 80 * @p;
                    line-height: 120 * @p;
                    font-weight: bold;
                    position: relative;
                    // background-color: yellowgreen;

                    &::before {
                        content: "";
                        position: absolute;
                        width: 80 * @p;
                        height: 80 * @p;
                        // background-color: purple;
                        background-size: 80 * @p 80 * @p;
                        background-repeat: no-repeat;
                        border-radius: 4px;
                        left: -125 * @p;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                .m-yuedu::before {
                    background-image: url(../public/yuedu.png);
                }

                .m-acfun::before {
                    background-image: url(../public/acfun.png);
                }

                .m-lolalytics::before {
                    background-image: url(../public/lolalytics.png);
                }

                .m-sub-name {
                    padding-top: 40 * @p;
                    font-size: 40 * @p;
                }
            }

            .m-project-content {
                margin-top: 60 * @p;

                .m-project-text {
                    font-size: 44 * @p;
                    line-height: 72 * @p;
                }

                .m-project-view {
                    margin-top: 40 * @p;
                    display: flex;
                    // width: 100%;
                    align-items: center;
                    height: 72 * @p;

                    .m-view-icon {
                        width: 60 * @p;
                    }

                    .m-project-link {
                        font-size: 48 * @p;
                        font-weight: bold;
                        line-height: 72 * @p;
                        margin: 0 20 * @p;
                    }

                    .m-arrow-right {
                        width: 60 * @p;
                        flex: none;
                    }
                }
            }
        }

        .m-project-swiper {
            height: 660 * @p;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .m-project-result {
            margin-top: 20 * @p;
            padding-left: 170 * @p;
            padding-right: 100 * @p;

            .m-result-title {
                font-size: 44 * @p;
                font-weight: bold;
            }

            .m-result-content {
                // margin-top: 12px;
                font-size: 40 * @p;

                p {
                    // padding-left: 40 * @p;
                    position: relative;
                    line-height: 60 * @p;

                    // &:not(:first-child) {
                    //     margin-top: 8px;
                    // }
                    margin-top: 20 * @p;

                    &::before {
                        content: "";
                        position: absolute;
                        width: 12 * @p;
                        height: 12 * @p;
                        border-radius: 50%;
                        background-color: black;
                        top: 24 * @p;
                        left: -26 * @p;
                    }

                    .m-npm {
                        width: 48 * @p;
                        height: 48 * @p;
                        display: inline-block;
                        vertical-align: middle;
                        position: relative;
                        top: -4 * @p;
                        // top: -2px;
                    }
                }

                .m-no-dot::before {
                    display: none;
                }
            }
        }

        .m-mobile-list {
            display: flex;
            margin-top: 42 * @p;
            justify-content: space-between;
            align-items: center;
            padding: 0 100 * @p;
            height: 660 * @p;

            .m-phone-wrapper {
                background-color: black;
                width: 282 * @p;
                height: 552 * @p;
                border-radius: 18 * @p;
                display: flex;
                justify-content: center;
                align-items: center;

                .m-phone-screen {
                    width: 270 * @p;
                    height: 540 * @p;
                    background-color: white;
                    border-radius: 14 * @p;
                }
            }
        }
    }

    .m-contact {
        width: 100%;
        padding: 100 * @p;

        .m-contact-title {
            font-size: 56 * @p;
            line-height: 84 * @p;
            font-weight: bolder;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                width: 72 * @p;
                height: 72 * @p;
                top: 50%;
                transform: translateX(-100%) translateY(-50%);
                left: -14 * @p;
                border-radius: 50%;
                background-image: url(../public/contact.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
        }

        .m-contact-list {
            display: flex;
            margin-top: 50 * @p;

            .m-contact-link {
                font-size: 48 * @p;
                display: flex;
                color: black;
                font-weight: bold;
                align-items: center;

                &:not(:first-child) {
                    margin-left: 96 * @p;
                }

                .m-contact-icon {
                    width: 60 * @p;
                    height: 60 * @p;
                }

                .m-contact-type {
                    margin-left: 24 * @p;
                }
            }
        }
    }
}
